"use client";

import { useMemo } from "react";
import type { AgentSummary } from "@agent-society/types";

export interface AgentNetworkProps {
  agents: AgentSummary[];
}

export function AgentNetwork({ agents }: AgentNetworkProps) {
  const nodes = useMemo(() => layoutCircular(agents), [agents]);
  const edges = useMemo(() => generateEdges(nodes), [nodes]);

  return (
    <div className="relative h-96 w-full overflow-hidden rounded-xl border border-slate-700/40 bg-slate-900/40">
      <svg className="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
        {edges.map(edge => (
          <line
            key={edge.id}
            x1={edge.source.x}
            y1={edge.source.y}
            x2={edge.target.x}
            y2={edge.target.y}
            stroke="url(#edgeGradient)"
            strokeWidth={edge.weight}
            strokeOpacity={0.45}
          />
        ))}
        <defs>
          <radialGradient id="nodeGradient" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#38bdf8" />
            <stop offset="100%" stopColor="#0f172a" />
          </radialGradient>
          <linearGradient id="edgeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#38bdf8" />
            <stop offset="100%" stopColor="#a855f7" />
          </linearGradient>
        </defs>
        {nodes.map(node => (
          <g key={node.agent.id}>
            <circle cx={node.x} cy={node.y} r={node.radius} fill="url(#nodeGradient)" stroke="#38bdf8" strokeOpacity={0.3} />
            <text x={node.x} y={node.y + node.radius + 2} textAnchor="middle" fontSize="3" fill="#e2e8f0">
              {node.agent.name}
            </text>
            <text x={node.x} y={node.y - node.radius - 1} textAnchor="middle" fontSize="2.5" fill="#94a3b8">
              {node.agent.balance} cr
            </text>
          </g>
        ))}
      </svg>
    </div>
  );
}

function layoutCircular(agents: AgentSummary[]) {
  const radius = 38;
  const center = { x: 50, y: 50 };
  const base = Math.max(agents.length, 1);
  return agents.map((agent, index) => {
    const angle = (index / base) * Math.PI * 2;
    const balanceRadius = Math.min(8, Math.max(4, Math.sqrt(agent.balance || 1)));
    return {
      agent,
      x: center.x + radius * Math.cos(angle),
      y: center.y + radius * Math.sin(angle),
      radius: balanceRadius
    };
  });
}

function generateEdges(nodes: ReturnType<typeof layoutCircular>) {
  if (nodes.length < 2) return [];
  const edges: Array<{
    id: string;
    source: { x: number; y: number };
    target: { x: number; y: number };
    weight: number;
  }> = [];
  for (let i = 0; i < nodes.length; i += 1) {
    for (let j = i + 1; j < nodes.length; j += 1) {
      const a = nodes[i];
      const b = nodes[j];
      const weight = Math.max(0.5, Math.min(2.5, (a.agent.balance + b.agent.balance) / 100));
      edges.push({ id: `${a.agent.id}-${b.agent.id}`, source: a, target: b, weight });
    }
  }
  return edges;
}
